<template>
	<view class="head-style">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 400rpx;">
			<view v-for="(item,index) in banner" :key="index">
				<swiper-item class="swiper-item-image">
					<image :src="item.image" mode="scaleToFill" style="height: 100%;width: 100%;"></image>
				</swiper-item>
			</view>
		</swiper>
		<scroll-view scroll-y="true" style="height: calc(100vh - 410rpx);margin-top: 10rpx;">
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item  v-for="(item,index) in 10" :key="index">
					<view class="grid-item" @click="toDetail">
						<image src="https://img1.baidu.com/it/u=722132356,726518063&fm=253&app=138&f=JPEG?w=800&h=1422" mode="aspectFill" class="grid-item-image"></image>
						<view class="grid-item-info">
							<view style="flex-grow: 1;margin-right: 10rpx;display: flex;flex-direction: column;">
								<text style="lines:2">洛川大苹果</text>
								<text style="lines:2;color: red;">¥19.5</text>
							</view>
							<view class="grid-item-info-buy">购买</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				banner: [
					{
						image: 'https://copyright.bdstatic.com/vcg/creative/641cf34726c786a2a470da7e6fb0edc9.jpg@wm_1,k_cGljX2JqaHdhdGVyLmpwZw=='
					},
					{
						image: 'https://copyright.bdstatic.com/vcg/creative/43cc36c0d58539fbbab5e35c198e9f51ea64a195.jpg'
					}
				]
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pages/home/homeDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.head-style{
		height: 100%;
		width: 100%;
		background-color: lightgray;
		display: flex;
		flex-direction: column;
		
		.swiper-item{
			height: 100%;
			width: 100%;
			align-items: center;
			display: flex;
			justify-content: center;
			color: white;
			
			.swiper-item-image {
				height: 100%;
				width: 100%;
			}
		}
	}
	
	.grid-item {
		background-color: white;
		height: 450rpx;
		display: flex;
		flex-direction: column;
		margin: 10rpx;
		align-items: center;
		justify-content: center;
		border-radius: 2%;
		
		.grid-item-image {
			height: 300rpx;
			width: 100%;
		}
		
		.grid-item-info {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: calc(100% - 20rpx);
			padding: 10rpx 10rpx 10rpx 10rpx;
			
			.grid-item-info-buy {
				width: 150rpx;
				background-color: red;
				height: 60rpx;
				color: white;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
		}
	}
	
</style>